<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页000</title>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
		/>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				/* 设为怪异盒 */
				/* 设置的边框和内边距的值是包含在width内的 */
			}

			html,
			body,
			.container {
				width: 100vw;
				height: 100vh;
			}
			li {
				list-style: none;
				/* li 默认属性取消 */
			}
			/* 最外层容器 */
			.container {
				display: flex;
				/* 设为弹性盒 */
				flex-direction: column;
				/* 项目将垂直显示 */
				/* direction 方向 column 竖直*/
			}
			/* 头部导航 */
			.nav li.mouseenter {
				color: orangered;
			}
			/* 主要内容 */
			.content {
				flex: 1;
				/* 用于设置或检索弹性盒模型对象的子元素如何分配空间。 */
				/* 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： */
				overflow: auto; /* 溢出隐藏 */
				background-color: olivedrab;
			}
			/* 尾部导航 */
			.nav {
				height: 50px;
				display: flex;
				align-items: center;
				/* 定义项目在交叉轴上的如何对齐 */
				/* 子项在交叉轴 居中对齐 */
				justify-content: space-around;
				/* 定义了项目在主轴上如何对齐 */
				/* 每个项目两侧间隔相等 1 2 2 2 1 */
			}

			.nav li {
				display: flex;
				flex-direction: column;
				/* 排列方式 为竖直排列 */
				align-items: center;
				/* 交叉轴排列 为居中 */
				justify-content: center;
				/* 主轴排列为 居中 */
				font-size: 0.6rem;
				/* 字体大小 rem  根据根元素字体大小进行适配 即html 如 font-size: 16px */
			}
			.nav li i {
				font-size: 1.2rem;
			}
			/* 尾部导航划过效果 */
			.nav li.active {
				color: deeppink;
			}
		</style>
	</head>
	<body>
		<!-- 移动端布局 -->
		<div class="container">
			<!-- 头部导航 -->
			<ul class="nav">
				<li :class="touNavIndex==0?'mouseenter':''" @mouseenter="touNavIndex=0">
					法律新闻
				</li>
				<li :class="touNavIndex==1?'mouseenter':''" @mouseenter="touNavIndex=1">
					案件纪实
				</li>
				<li :class="touNavIndex==2?'mouseenter':''" @mouseenter="touNavIndex=2">
					律师新闻
				</li>
				<li :class="touNavIndex==3?'mouseenter':''" @mouseenter="touNavIndex=3">
					打击老赖
				</li>
			</ul>
			<!-- 轮播图 -->
			<div class="lunbutu"></div>
			<!-- 主要内容 -->
			<div class="content">
				<li>kackjbkabv</li>
				<li>kackjbkabv</li>
				<li>kackjbkabv</li>
			</div>
			<ul class="nav">
				<!-- 三目运算 点击事件 -->
				<li :class="selectIndex==0?'active':''" @click="selectIndex=0">
					<i class="fa fa-home"></i>首页
				</li>
				<li :class="selectIndex==1?'active':''" @click="selectIndex=1">
					<i class="fa fa-star"></i>名状
				</li>
				<li :class="selectIndex==2?'active':''" @click="selectIndex=2">
					<i class="fa fa-bolt"></i>圈子
				</li>
				<li :class="selectIndex==3?'active':''" @click="selectIndex=3">
					<i class="fa fa-user"></i>我的
				</li>
			</ul>
		</div>
		<script src="./libs/vue.js"></script>
		<script>
			new Vue({
				el: ".container",
				data: {
					touNavIndex: 0, // 头部导航划过
					selectIndex: 0, // 尾部导航划过
				},
			});
		</script>
	</body>
</html>
